<template>
  <my-div class="transfer">
     <head title="转入">
      <!-- <div slot="right" style="width: 36;height: 36">
        <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
      </div> -->
    </head>
    <scroller :show-scrollbar="false">
      <my-div class="transfer-choose">
        <my-text  day_color="rgba(70,120,245,1)" :text="$t('wallet.change_into')" night_color="rgba(184,111,36,1)"  class="transfer-title"></my-text>
        <div class="choose-currency">
          <text class="currency-name">{{current_wallet_type}}</text>
          <div class="currency-wrapper" @click="is_bottom_show">
            <text class="choose-label">{{$t('wallet.choose_type')}}</text>
            <image style="width:18px;height:32px;margin-left:14px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
      </my-div>
      <my-div day_bg="rgba(245,246,249,1)" class="erweima-wrapper">
        <image ref="poster" :src="qrcode" style="width:298px;height:298px;margin-top:90px;"></image>
        <div class="save-box" @click="save_qrcode(true)">
          <text class="save-erweima">{{$t('wallet.save_photo')}}</text>
        </div>
        <text class="currency-address">{{$t('wallet.in_address')}}</text>
        <text class="currency-dec" ref="copy" >{{accountId}}</text>
        <text class="currency-copy" @click="copy">{{$t('wallet.copy')}}</text>
      </my-div>
      <div style="margin-bottom:20px;">
         <text class="transfer-attention" v-for="(content,key) of attention" :key="key">{{content}}</text>
      </div>
    </scroller>
  </my-div>
</template>

<script>
const clipboard = weex.requireModule('clipboard')
const net = require('../../utils/http.js')
import { WxcPopup,WxcRadio } from 'weex-ui';
import { host } from '../../utils/config.js';
export default {
  name: '',
  data() {
    return {
      qrcode:'',
      message:'',
      wallet_types:[],
      current_wallet_type:'ADA',
      config:{
         checkedColor: 'rgba(60,71,98,1)'
      },
      accountId:''
    }
  },
  components: {WxcRadio},
  created() {
    var globalEvent = weex.requireModule('globalEvent');
    globalEvent.addEventListener("onPageInit", (param) => {
      if(!param) return
      this.get_attention()
      this.current_wallet_type = param.name
      this.accountId = this.current_wallet.account_id
      const wallet_types = param.wallet_types
      this.get_address(this.current_wallet_type)
      wallet_types.forEach(item => {
           this.wallet_types.push({
             title:item.name,
             value:item.name
           })
        });
      // this.qrcode = this.get_qrcode()
      this.save_qrcode(false)
    })
  },
  methods: {
    copy(){
      clipboard.setString(this.accountId)
      this.toast('复制成功')
    },
    is_bottom_show(){
      this.navigator.presentFull({url:'root:pages/wallet/search_wallet.js',animate:true},(p)=>{
        if(!p) return
        this.current_wallet_type = p.name
        this.get_address(p.name)
      })
    },
    get_address(type){
      if(type === 'BTC'){
        this.$http.get('wallet/getUserTraceAddress',{walletName:type,accountId:this.accountId},(res)=>{
          this.accountId = res.result
          this.qrcode = this.get_qrcode()
        })
      }else {
        this.accountId = this.current_wallet.account_id
        if(this.accountId) this.qrcode = this.get_qrcode()
      }
    },
    get_attention(){
      this.$http.getSilent('index/tradenote',{tradeType:1},(res)=>{
        this.attention = []
        const content1 = res.returnObject.content1
        const content2 = res.returnObject.content2
        const content3 = res.returnObject.content3
        const content4 = res.returnObject.content4
        const content5 = res.returnObject.content5
        if(content1) this.attention.push(content1)
        if(content2) this.attention.push(content2)
        if(content3) this.attention.push(content3)
        if(content4) this.attention.push(content4)
        if(content5) this.attention.push(content5)
      })
    },
    save_qrcode(flag){
      const progress = weex.requireModule('progress');
      const $image = this.$refs.poster
      if(flag){
        progress.showFull('保存中...',true)
        }
      $image.save(result => {
         progress.dismiss()
        if (result.success) {
          // Do something to hanlde success
          this.toast('保存成功')
        } else {
          if(!flag) return
          this.toast('保存失败')
          // Do something to hanlde failure
        }
      })
    },
    // get_wallet_types(){
    //   net.getSilent('wallet/listWalletTypes',{},(res)=>{
    //     const list = res.result
    //     this.alert(list)
    //     list.forEach(item => {
    //        this.wallet_types.push({
    //          title:item.name,
    //          value:item.name
    //        })
    //     });
    //   })
    // },
    get_qrcode(){
      return `${host}wallet/qr?code=123:${this.current_wallet_type}:${this.accountId}`
    },
    get_charge_address(){
      const account = this.pref.get('account')
      const current_user_key = this.pref.get('current_user_key')
      const p = {
        walletName:'',
        accountId:''
      }
    }
  }
}
</script>
<style scoped>
.transfer-choose{
  width: 720px;
  padding-left: 30px;
  height: 246px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;
  margin-bottom: 40px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 90px;
  border-radius: 10px;
  background-color: rgba(245,246,249,1);
}
.currency-name{
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  margin-left: 20px;
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}
.choose-label{
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
}
.erweima-wrapper{
  width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.save-box{
  width: 270px;
  height: 60px;
  border-radius: 10px;
  margin-top: 20px;
  background-color: rgba(70,120,245,.1);
}
.save-erweima{
  font-size: 28px;
  text-align: center;
  font-family: PingFang SC;
  color: rgba(70,120,245,1);
  line-height: 60px;
}
.currency-address{
  margin-top: 60px;
  margin-bottom: 18px;
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
}
.currency-dec{
  text-align: center;
  lines:4;
  width: 500px;
  height: 120px;
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  line-height: 30px;
}
.currency-copy{
  width: 140px;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 56px;
  font-size: 28px;
  color: rgba(60,71,98,1);
  background-color: rgba(60,71,98,0.1);
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
}
.currency-copy:active{
  color: rgba(70,120,245,1);
}
.transfer-attention{
  width: 690px;
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
  line-height: 36px;
  margin-top: 20px;
  margin-left: 30px;
}
</style>
